<template>
	<page-meta :page-style="`overflow: ${moreVisible ? 'hidden' : 'visible'}`"></page-meta>
	<view class="payment-box">
		<image src="https://free.picui.cn/free/2025/10/17/68f256bb57a2a.png" mode="aspectFill"></image>
		<view class="valid-time">
			核销有效期至2025.09.02
		</view>
		<view class="tag">
			赶紧预约门店享受服务吧
		</view>
	</view>
	<view class="store-list">
		<view class="title-row">
			<view class="title">适用门店</view>
			<view class="desc">
				仅能选择其中一家进行核销
			</view>
		</view>
		<StoreCard :storeList="storeList" />
	</view>
	<image class="landing-img" src="https://free.picui.cn/free/2025/10/14/68ee43a7c2d90.png" mode="widthFix"></image>
	<view class="footer-block"></view>
	<view class="footer-box">
		<view class="left-btns">
			<view class="item-btn haptics-feedback" @click="back">
				<image src="/src/static/activity/detail/back-icon.png" mode="aspectFill"></image>
				<view class="label">返回</view>
			</view>
			<view class="item-btn haptics-feedback" @click="moreVisible = true">
				<image src="/src/static/activity/detail/more-icon.png" mode="aspectFill"></image>
				<view class="label">更多</view>
			</view>
			<view class="item-btn haptics-feedback">
				<image src="/src/static/activity/detail/service-icon.png" mode="aspectFill"></image>
				<view class="label">客服</view>
			</view>
		</view>
		<view class="right-btns">
			<navigator url="/pages/order/writeOff/index" class="btn writeOff-btn">去核销</navigator>
			<navigator class="btn share-btn">分享赚</navigator>
		</view>
	</view>
	
	<MoreFunctions
		v-model:visible="moreVisible"
	/>
</template>

<script setup>
import { ref } from 'vue';
import StoreCard from '@/components/StoreCard/index.vue'
import MoreFunctions from '@/pages/activity/detail/components/MoreFunctions.vue';

const storeList = ref([10, 2, 3, 4, 5])

const moreVisible = ref(false)

const back = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.payment-box {
	margin: 28rpx 20rpx;
	text-align: center;
	padding: 76rpx 40rpx;
	border-radius: 40rpx;
	background: linear-gradient(180deg, #FFEADD 0%, #FFFFFF 100%);
	image {
		width: 276rpx;
		height: 228rpx;
	}
	.valid-time {
		color: #757575;
		margin-bottom: 32rpx;
	} 
	.tag {
		height: 68rpx;
		padding: 0 40rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		color: #AD7141;
		background-color: #F9EBDF;
	}
}
.store-list {
	overflow: hidden;
	margin: 28rpx 20rpx;
	padding: 0 14rpx;
	border-radius: 40rpx;
	background-color: #fff;
	.title-row {
		padding: 34rpx 44rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
		.desc {
			font-size: 24rpx;
			color: #BFBFBF;
		}
	}
}
.landing-img {
	width: 100%;
	display: block;
}

.footer-block {
	height: calc(114rpx + constant(safe-area-inset-bottom));
	height: calc(114rpx + env(safe-area-inset-bottom));
}
.footer-box {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40rpx;
	height: calc(114rpx + constant(safe-area-inset-bottom));
	height: calc(114rpx + env(safe-area-inset-bottom));
	padding: 0 40rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	background-color: #fff;
	.left-btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 48rpx;
		.item-btn {
			text-align: center;
			image {
				width: 34rpx;
				height: 34rpx;
			} 
			.label {
				font-size: 24rpx;
				color: #393939;
			}
		}
	}
	.right-btns {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
		.btn {
			width: 176rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4rpx;
			border-radius: 70rpx;
			font-size: 30rpx;
			font-weight: 700;
			color: #fff;
		}
		.writeOff-btn {
			background-color: #9585FF;
		}
		.share-btn {
			background: linear-gradient(229.24deg, #FF8D1A 0%, #FFA940 50.74%, #FFC966 100%);
		}
	}
}

</style>